﻿<style type="text/css">
    .index-top{background: #313f68;padding: 10px 15px 7px 15px;position:fixed;top:0px;left:0px;width:100%;z-index:999;}
    .index-left{width: 85%;display:inline-block;}
    .index-left p{display: inline-block;font-size: 15px;color: #fff}
    .index-left span{color: #fff}
    .index-left .left-input{background:#43527f;width: 91%; }
    .index-left .left-input span{display: inline-block;}
    .index-left .left-input .left-icon1{padding-left: 10px;padding-right: 5px;}
    .index-left .left-input .left-icon1 i{font-size: 18px;position: relative;top: 1px;}
    .index-left input::-webkit-input-placeholder {color: #aebce3!important; }
    .index-left input:-ms-input-placeholder {color: #b1d0e8!important; }
    .index-left input{height: 30px;border: none;background: none;color: #fff;font-size: 15px;width: 80%;}
    .index-right{text-align:right;float: right;width: 6%;padding-right:30px;margin-top: -1px;}
    .index-right a{color: #fff;}
    .index-right i{font-size: 30px;}
    /*聊天列表*/
    .news-bottom{z-index:0;margin-top:6px;}
    .news-bottom ul li{display:-webkit-box;border-bottom: 1px solid #f2f2f2;clear: both;position: relative;}
    .news-bottom ul li a{display: block;display:-webkit-box;padding-top: 10px;padding-bottom: 10px;}
    .news-bottom ul li .news-pic{margin-left: 15px;margin-top:5px;}
    .news-bottom ul li .news-pic img{width: 50px;height: 50px;display: inline-block;border-radius: 5px;}
    .news-cont{margin: 5px 0px 6px 10px;-webkit-box-flex: 1;}
    .news-cont h2{font-size: 16px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;font-weight: 700;margin-right: 100px;}
    .news-cont p{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;font-size: 14px;color: #999;margin-top: 5px;margin-right: 15px;}
    .news-time{position: absolute;top:16px;right: 20px;color: #ccc}
</style>
<div class="index-top">
    <div class="index-left">
        <p class="left-input">
            <span class="left-icon1"><i class="iconfont icon-31sousuo"></i></span>
            <input type="text" placeholder="添加新朋友" v-on:keypress="search($event)">
        </p>
    </div>
    <div class="index-right">
        <a v-on:click="relation">
            <i class="iconfont icon-31haoyou"></i>
            <span v-if="bag.applywait > 0" v-text="bag.applywait" class="mv-mark" style="right:60px;top:20px;">0</span>
        </a>
    </div>
</div>
<div class="news-bottom">
    <ul>
        <li v-for="data in bag.datas" v-on:click="chat(data.friendid)" v-cloak="">
            <a>
                <div class="news-pic">
                    <img :src="data.head">
                </div>
                <div class="news-cont">
                    <h2 v-text="data.username">-</h2>
                    <p v-html="mview.custom.messageanalyze(data)">-</p>
                </div>
                <span class="news-time" v-text="mview.custom.timeanalyze(data.addtime)">-</span>
            </a>
        </li>
    </ul>
</div>
<div style="height:60px;"></div>
<script type="text/javascript">
    var pagedata = {
        request: {
            method: "VIEW_FRIEND_MESSAGELISTS",
            linkroot: true
        },
        screen: {
            header_display: false,
            footer_choose: "friend"
        },
        data: {

        },
        oncreate: function () {
            pagedata.Interval = window.setInterval(function () {
                pagedata.reload();
            }, 8000);
        },
        onclose: function () {
            window.clearInterval(pagedata.Interval);
        },
        onpush: function (json) {
            //如果接收到好友消息
            if (json.DataType == "FRIEND_MESSAGE") {
                //静态更新本地列表
                var sendid = json.Content.sendid;
                var content = json.Content.content;
                for (var i in pagedata.data.bag.datas) {
                    var data = pagedata.data.bag.datas[i];
                    if (data.friendid == sendid) {
                        data.content = content;
                        continue;
                    }
                }
                return true;//拒绝处理
            }
            else {
                return false;//拒绝处理
            }
        },
        methods: {
            search: function (event) {
                if (event.keyCode == 13) {
                    var value = event.target.value;
                    mview.view.load('/views/module/friend/searchlists.html', {
                        username: value
                    });
                }
            },
            relation: function () {
                mview.view.load('/views/module/friend/relationlists.html');
            },
            chat: function (id) {
                mview.view.load('/views/module/friend/message.html', {
                    id: id
                });
            }
        }
    }
    mview.view.chlid.init(pagedata);
</script>